<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="true">
      <p slot="content">订单详情</p>
    </Yq-header>
    <div :style="boxStyle">
      <flexbox orient="vertical" :gutter="0" el="ContactBox">
        <flexbox-item>
          <group gutter="0">
            <flexbox>
              <flexbox-item :span="8.8" style="padding-left: 15px;">
                <div style="height: 52px;color: #636363;">
                  <p style="text-align:left;line-height: 26px;font-size: 14px;margin-top: 10px;">{{orderDetail.createtime}}</p>
                  <p style="text-align:left;line-height: 16px;font-size: 14px;">订单编号:{{orderDetail.orderCode}}</p>
                </div>
              </flexbox-item>
              <flexbox-item>
                <p v-if="orderDetail.orderState===1" style="text-align:left;line-height: 25px;font-size: 13px;color: #ff1414;">待付款</p>
                <p v-if="orderDetail.orderState===2" style="text-align:left;line-height: 25px;font-size: 13px;color: #ff1414;">待发货</p>
                <p v-if="orderDetail.orderState===3" style="text-align:left;line-height: 25px;font-size: 13px;color: #ff1414;">待收货</p>
                <p v-if="orderDetail.orderState===4" style="text-align:left;line-height: 25px;font-size: 13px;color: #ff1414;">已确认</p>
              </flexbox-item>
            </flexbox>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group title="收货信息" style="color: black;" v-if="kindId!==4">
            <p style="text-align:left;line-height: 25px;font-size: 14px;padding-left: 15px;margin-top: 5px;color: #636363;">{{address.linkName}}&nbsp;&nbsp;{{address.linkTel}}</p>
            <p style="text-align:left;line-height: 20px;font-size: 14px;padding-left: 15px;color: grey">{{address.pro + address.city + address.area + address.address}}</p>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group title="商品信息">
            <flexbox :gutter="0" v-for="order in orderDetail.items" style="border-bottom: solid 1px gainsboro">
              <flexbox-item :span="4">
                <div style="display: block;width:80px;height:80px;margin:10px 5px 10px 15px;">
                  <!--<img :src=order.itemUrl alt="itemImg" style="width: 100%;"> 正式图片时可直接图片100%-->
                  <img :src=order.itemUrl alt="商品图片" style="width:80px;height:80px;">
                </div>
              </flexbox-item>
              <flexbox-item>
                <p style="line-height: 20px;font-size: 13px;">{{order.itemName}}</p>
              </flexbox-item>
              <!--<flexbox-item :span="1.5">-->
              <!--<p>¥{{order.price}}</p>-->
              <!--<p style="color: grey;">x{{order.count}}</p>-->
              <!--</flexbox-item>-->
              <flexbox-item :span="3.7">
                <p v-if="order.payType===1" style="line-height: 30px;font-size: 13px;text-align: right;padding-right: 10px;">¥{{order.price}}</p>
                <p v-if="order.payType===2" style="line-height: 30px;font-size: 13px;text-align: right;padding-right: 10px;">{{orderDetail.totalPrice}}积分</p>
                <p style="color: grey;line-height: 30px;font-size: 12px;text-align: right;padding-right: 10px;">x{{order.count}}</p>
                <div style="text-align: right;margin: 0 10px 10px 0" v-if="orderDetail.orderState!==1&&orderDetail.orderState!==4&&order.status!==3&&orderDetail.orderKind===1">
                  <x-button mini plain @click.native="refundFn(order.orderSubId,orderDetail.createtime)" style="background: #000;color: white;font-size: 13px;">申请退款</x-button>
                </div>
              </flexbox-item>
            </flexbox>
            <cell title="发货方式"><span style="color: #a9a9a9;font-size: 13px;">快递:0元(包邮)</span></cell>
            <cell v-if="vipPayType===1" title="订单总计"><span style="color: #636363;font-size: 13px;">¥{{orderDetail.totalPrice}}</span></cell>
            <cell v-if="vipPayType===2" title="订单总计"><span style="color: #636363;font-size: 13px;">{{orderDetail.totalPrice}}积分</span></cell>
          </group>
        </flexbox-item>
        <flexbox-item>
          <group title="支付信息" style="color: black;" v-if="orderDetail.orderState!==1">
            <cell v-if="orderDetail.pointPay===''||orderDetail.pointPay===null||orderDetail.pointPay===undefined" title="积分抵扣"><span style="color: black;font-size: 16px;">{{orderDetail.costPoint}}积分</span></cell>
            <cell v-if="orderDetail.pointPay!==''&&orderDetail.pointPay!==null&&orderDetail.pointPay!==undefined" title="积分抵扣"><span style="color: black;font-size: 16px;">¥{{orderDetail.pointPay}}&nbsp;&nbsp;({{orderDetail.costPoint}}积分)</span></cell>
            <cell v-if="orderDetail.balancePay!==''&&orderDetail.balancePay!==null&&orderDetail.balancePay!==undefined" title="余额抵扣"><span style="color: black;font-size: 16px;">¥{{orderDetail.balancePay}}</span></cell>
            <cell v-if="orderDetail.wxPay!==''&&orderDetail.wxPay!==null&&orderDetail.wxPay!==undefined" title="微信支付"><span style="color: black;font-size: 16px;">¥{{orderDetail.wxPay}}</span></cell>
          </group>
          <div style="text-align: right;margin: 10px 10px 10px 0"  v-if="orderDetail.orderState!==''&&orderDetail.orderState===1">
            <!--<x-button mini>取消</x-button>-->
            <div style="display: inline-block;height: 26px;margin: auto 0;border-radius: 4px;padding: 0 5px;background: #f95320;">
              <p @click="goPayFn(orderDetail.pid)" style="font-size: 13px;display: inline-block;line-height: 20px;color: white">去付款</p>
              <clocker @click="goPayFn(orderDetail.pid)" v-if="orderDetail.countDown!==''" :time=orderDetail.countDown slot="value">
                <span class="day">%_M1%_M2:%_S1%_S2</span>
              </clocker>
            </div>
          </div>
        </flexbox-item>
      </flexbox>
    </div>
    <div style="width: 100%">
      <p style="text-align: center;color: blue;margin-bottom: 10px;" align="center">
        <a  :href="qqLink"><p style="color: #999999;padding-top: 30px">联系客服</p></a>
      </p>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, Tab, TabItem, Swiper, SwiperItem, Flexbox, FlexboxItem, XButton, Clocker, Sticky, Alert } from 'vux'
  import * as urls from '../../../../api/urls'
  import * as types from '../../../../store/types'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Flexbox,
      FlexboxItem,
      XButton,
      Clocker,
      Sticky,
      Alert,
      YqHeader
    },
    data () {
      return {
        vipPayType: '',
        kindId: '',
        dataTime: '',
        show: false,
        qqLink: '',
        message: '',
        boxStyle: 'min-height: 200px;border: solid 1px bisque;',
        orderDetail: {
          id: '',
          orderCode: '286887040912457728',
          items: [],
          totalPrice: 58,
          userId: 1,
          addressId: 2,
          createtime: '2017-03-02 15:46:41'
        },
        address: {
          pro: '',
          city: '',
          area: '',
          address: '',
          linkName: '',
          linkTel: ''
        }
      }
    },
    computed: {
    },
    mounted: function () {
      let qq = this.$store.state.empower.sysqq
      this.qqLink = 'http://wpa.qq.com/msgrd?v=3&uin=' + qq + '&site=qq&menu=yes'
      this.getOrderDetailFn()
      this.weixinfn23()
      this.boxStyle = 'padding-top: 38px;min-height:' + (document.body.clientHeight - 38 - 65) + 'px'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
    },
    methods: {
      goPayFn (mianOrderId) {
        this.$router.push({
          path: '/shoppingCar/shoppingBuy',
          query: {
            money: '',
            useScore: '',
            mianOrderId: mianOrderId
          }
        })
        this.$router.go(1)
      },
      weixinfn23 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      onHide () {
        console.log('on hide')
      },
      onShow () {
        console.log('on show')
      },
      getOrderDetailFn () {
        let orderId = this.$store.state.userOrder.orderId
        this.kindId = this.$store.state.userOrder.kindId
        let that = this
        that.http(urls.userOrderDetail, {id: orderId}, function (res) {
          if (res.status === 100) {
            console.log('订单详情')
            console.log(res.data)
            that.orderDetail = res.data.orderDetail
            that.vipPayType = res.data.orderDetail.items[0].payType
            if (that.orderDetail.orderState === 1) {
              // 时间倒计时
              let str = that.orderDetail.createtime
              str = str.replace(/-/g, '/')
              let myDate = new Date(str)
              myDate.setMinutes(myDate.getMinutes() + 30)  // 当前时间加15分钟
              that.orderDetail.countDown = myDate.getFullYear() + '-' + parseInt(myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds()
            }
            that.address = res.data.address
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      refundFn (orderSubId, mcreateTime) {
        this.$store.commit(types.USER_ORDER, {itemId: orderSubId, mcreateTime: mcreateTime})
        this.$router.push({
          path: '/order/OrderRefund'
        })
        this.$router.go(1)
      }
    }
  }
</script>

<style scoped="scoped">
  .day{
    font-size: 14px;
    color: white;
  }
</style>
